<template xmlns:vertical-align="http://www.w3.org/1999/xhtml">

    <el-header style="text-align: right; font-size: 16px; padding: 0;height: 80px">
      <div>

        <el-menu
                :default-active="activeIndex2"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b"
                style="height: 80px"
                router
                default-active="/mainShow">

            <el-menu-item index="/mainShow" @click="searchClear" style="line-height: 80px; height: 80px;font-size: 20px;width: 120px;text-align: center;font-weight: 400">首页</el-menu-item>
            <el-menu-item index="/shopSettled" style="line-height: 80px; height: 80px;font-size: 20px;width: 120px;font-weight: 400" v-if="uid === 1 || uid === 0">商家入驻</el-menu-item>
            <el-menu-item index="/myStore"  style="line-height: 80px; height: 80px;font-size: 20px;width: 120px;font-weight: 400" v-else>店铺管理</el-menu-item>
            <Search ref="search"/>
            <el-button @click="drawer = true"
                       type="text"
                       style="margin-left: 16px; margin-right: 25px; text-align: right;">
                <i class="el-icon-more"></i>
            </el-button>
            <el-drawer
                    withHeader:false
                    :visible.sync="drawer"
                    :with-header="false">
                <Aside></Aside>
            </el-drawer>
        </el-menu>
      </div>
    </el-header>

</template>

<style scoped lang="less">
    .el-submenu /deep/ .el-submenu__title {
        height: 80px !important;
        line-height: 80px !important;
    }
    .el-header {
        background-color: #B3C0D1;
        color: #333;
        line-height: 80px;
        top: -15px;
    }
    .el-button{
        color: white;
        font-size: 30px;
        margin-bottom: 10px;
    }
    .el-button:hover{
        color: white;
    }
    .el-button:focus{
        color: white;
    }
    i{
        vertical-align: middle;
    }
</style>

<script>
    import Aside from "@/views/Aside.vue";
    import Search from "@/views/Search.vue";

    export default {
        components: {
            Aside,Search
        },
        data() {
            return {
                activeIndex: '1',
                activeIndex2: '1',
                drawer: false,
                url: '',
                uid:0,
            };
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            searchClear(){
                this.$refs.search.search = ''
            },
            getUserSession(){
                this.uid = JSON.parse(sessionStorage.getItem('users')).authority;
            }
        },
        mounted() {
            window.addEventListener('setItem',this.getUserSession)
        },
        created() {
            if (JSON.parse(sessionStorage.getItem('users')) != null){
                this.uid = JSON.parse(sessionStorage.getItem('users')).authority;
            }
        }
    }
</script>